<template>
<div>
  <div class="loader-base" v-if="showLoad"><div class="loader-wrap"></div></div>
  <header class="hd-top">
    <span class="iconfont icon-left" @click="goBack"></span>
    <h2 class="title">待派单</h2>
  </header>
  <div class="page">
    <!-- <div class="displayflex top-bar-w">
      <div class="top-bar-c flex1">
        <i class="iconfont icon-sech"></i> 
        <div class="ipt"><input type="text" placeholder="输入订单编号" v-model="bbillno"></div>
      </div> 
      <div class="btn-sech" @click="getData()">搜索</div>
    </div> -->
    <div class="list-warp" v-for="item in todolist">
      <div class="list-ctx">
        <!-- <div class="head cf ft14">
          <p class="f-l">{{item.BBillNo}}</p>
          <span class="f-r">{{item.State | orderState}}</span>
        </div> -->
        <div class="grab-wrap">
          <div class="addr ft17"><span class="dotted"></span>{{item.DepartureProvince | province}}{{item.DepartureCity | city}}{{item.DepartureDistrict | district}}{{item.DepartureAddress}}</div>
          <div class="addr ft17"><span class="dotted org"></span>{{item.ArrivalProvince | province}}{{item.ArrivalCity | city}}{{item.ArrivalDistrict | district}}{{item.ArrivalAddress}}</div>
          <div class="statis ft14 displayflex">
            <span>{{item.OrdersWeight | weight}}，{{item.OrdersVolumn | volumn}}，共{{item.OrdersPKGS}}件</span>
            <div class="flex1 txt-rit">运费<em class="org">￥</em><span class="price org ft16">{{item.CarrierAmount | DriverFee}}</span></div>
          </div>
          <div class="ft14">最晚提货时间：<span class="org">{{item.CollectionTime | timeshort}}</span></div>
          <div class="ft14">要求到达时间：<span class="org">{{item.LastArrivalArrivedDate | timeshort}}</span></div>
        </div>
        <div class="icon-tag"><img src="~images/icon/emergent.png"></div>
        <div class="grab-btn btn" @click="dispatchurl(item.BBillGuid,item.BBillNo)">立即派单</div> 
      </div>
    </div>
    <div class="noDate_page" v-if="todolist.length<=0">
      <div class="noDate_icon"><i class="iconfont icon-null"></i></div>
      未找到相关数据
    </div>
  </div>
</div>
</template>

<script>
export default {
  data() {
    return {
      todolist: [],
      showLoad: false,
      bbillno:''
    };
  },
  computed: {
    userinfo() {
      if (localStorage.UserInfo) {
        return JSON.parse(localStorage.UserInfo);
      }
    }
  },
  created() {
    this.getData();
  },
  methods: {
    getData() {
      var query = {
          State: 12,
          BBillType:'B05',
          PageIndex:1,
          PageSize:100
        },
        _this = this;
      _this.showLoad = true;
      _this.Ajax.post("SearchOrderList", query).then(function(resp) {
        _this.showLoad = false;
        if (resp.IsSuccess) {
          _this.todolist = resp.Datas;
        }
      });
    },
    goBack() {
      this.$router.go(-1);
    },
    dispatchurl(BBillGuid, BBillNo) {
      this.$router.push({
        path: "/driverList",
        query: {
          BBillGuid: BBillGuid,
          BBillNo: BBillNo
        }
      });
    }
  }
};
</script>